<template>
    <div class="list">
      <div class="header">
        <div class="box1">
              <p>通知发布数量</p>
              <p>2022年08月</p>
              <p><span>{{ datalist3 }}</span>条</p>
        </div>
        <div class="box2">
              <p>相册发布数量</p>
              <p>2022年08月</p>
              <p><span>{{ datalist1 }}</span>条</p>
        </div>
        <div class="box3">
              <p>评价发布数量</p>
              <p>2022年08月</p>
              <p><span>{{ datalist2 }}</span>条</p>
        </div>
        <div class="box4">
              <p>投票发布数量</p>
              <p>2022年08月</p>
              <p><span>{{ datalist5 }}</span>条</p>
        </div>
      </div>
  
    <div class="tongji">
      <h4>消息发布数量统计</h4>
    
      <span>2022年08月 | 前10</span>
      <span class="more" @click="check">查看更多></span>
    </div>
    <div id="main"></div>
    
    <div class="paihang">
         <div class="left">
                 <h4>学校月消息发布排行榜</h4>
                <p> <span>2022年08月 | 前10</span>
                 <span class="more1" @click="check1">查看更多></span></p> 
                 <el-table :data="datalist4" stripe style="width: 540px">
                 <el-table-column prop="sort" label="排名" width="180" />
                 <el-table-column prop="school" label="姓名" width="180" />
                 <el-table-column prop="num" label="累计发布数量消息" />
                 </el-table>
         </div>
         <div class="right">
                 <h4>教师月消息发布排行榜</h4>
               <p> <span>2022年08月 | 前10</span>
                 <span class="more1" @click="check2">查看更多></span> </p>
                  <el-table :data="tableData" stripe style="width: 540px">
                 <el-table-column prop="sort" label="排名" width="180" />
                 <el-table-column prop="teacher" label="姓名" width="180" />
                 <el-table-column prop="count" label="累计发布数量消息" />
                 </el-table>
         </div>
    </div> 
    </div>
  </template>
  
  <script setup>
  //1.导入echarts
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue'; 
var tableData = ref([])


import { useRouter } from 'vue-router';
var router = useRouter();

  //a,导入接口
  import server from '@/api/index'

 var check =()=>{
  router.push('./PublicList')
 }
 var check1 =()=>{
  router.push('./School')
 }
 var check2 =()=>{
  router.push('./Teacher')
 }



 var datalist1 = ref()
 var datalist2 = ref()
 var datalist3 = ref()
 var datalist4 = ref()
 var datalist5 = ref()
 var tableData = ref()
  //3.绘图
  onMounted(async()=>{
     //相册数量请求
  var res1 =  await server.xiaoxitongji.messageStatistics_photonum()
  datalist1.value = res1.data.data 

      //投票请求
      var res5 =  await server.xiaoxitongji.messageStatistics_vote()
  datalist5.value = res5.data.data 
  //b,发请求
  var res =  await server.xiaoxitongji.messageStatistics_msgnum()
  var datalist = (res.data.data);


 /*  console.log((await res).data);
  console.log((await res).data.data); */
  var res6 =  await server.xiaoxitongji.messageStatistics_teachermsgnum()
 tableData.value = res6.data.data 


  var res2 =  await server.xiaoxitongji.messageStatistics_evaluatenum()
  datalist1.value = res1.data.data 




    //学校月消息发布排行
    var res4 =  await server.xiaoxitongji.messageStatistics_schoolmsgnum()
    datalist4.value = res4.data.data
    console.log(datalist4);



  var res3 =  await server.xiaoxitongji.messageStatistics_noticenum()
  datalist3.value = res3.data.data 
  datalist2.value = res2.data.data 

 //2.实例化echarts
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
 /*  title: {
     text: '消息发布数量统计'
 }, */
  tooltip: {},
  xAxis: {
    data: datalist.map(item => item.name),
    splitLine:{
      lineSty:{
        type:'dashed'
      },
      show: false,
    }
  },
  yAxis: {
    
  },
  series: [
    {
      barWidth:'30',
      name: '销量',
      type: 'line',
      data: datalist.map(item => item.num),
       //柱状条样式
      itemStyle:{
      borderRadius: 10,
      color: '#4ad0b3',
    },
   },
 ]
});
})
  
  </script>
  
  <style scoped lang="scss">
  .list{
    width: 100%;
    height: 100%;
    background-color: #fbf8f8;
    padding: 10px;
  }
  .header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .box1{
    width: 240px;
    height: 80px;
    background-color: rgb(149, 149, 229);
    border-radius: 5px;
    color: white;
    font-size: 14px;
    padding: 15px;

  }
  .box2{
    width: 240px;
    height: 80px;
    background-color: rgb(178, 127, 190);
    border-radius: 5px;
    color: white;
    font-size: 14px;
    padding: 15px;
  } 
  .box3{
    width: 240px;
    height: 80px;
    background-color: rgb(222, 133, 147);
    border-radius: 5px;
    color: white;
    font-size: 14px;
    padding: 15px;
  } 
  .box4{
    width: 240px;
    height: 80px;
    background-color: skyblue;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    padding: 15px;
  }
  

  }
 .list p{
    margin-top: 10px;
    }
 .list span{
      font-size: 20px;
      margin-right: 10px;
      font-weight: 700;
    }


  #main{
    height: 400px;
    background-color: #fff;
  }
  .list .paihang{
    margin-top: 15px;
    display: flex;
    background-color: #fff;
  }
  .list .right{
    margin-left: 10px;
  }
  .tongji{
    position: relative;
    background-color: #fff;

   
  }
 
  
 .tongji span{
    font-size: 10px;
    color: #9d9c9c;
  }
  
  .more{
    position: absolute;
    right: 0;
    top: 25px;
  }
  .more:hover{
    color: blue;
    cursor: pointer;
  }
  .paihang{
    position: relative;
    
  }
  .left .more1{
    position: absolute;
    left: 450px;
  }
  .right .more1{
    position: absolute;
  right: 0;
  }
  .paihang span{
    font-size: 10px;
    color: #9d9c9c;
  }
  .more1:hover{
    color: blue;
    cursor: pointer;
  }
  .more2:hover{
    color: blue;
    cursor: pointer;
  }




   
  </style>